<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<head>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body>    
    <i class="fa fa-car" style="font-size:48px;"></i>
    <i class="fa fa-car" style="background-color:blue;font-size: xx-large;"></i>
    <i class="fa fa-car" style="font-size:60px;color:yellowgreen;"></i>
    <head>html hello world &#8704;d 中华人民共和国万岁</head>
    <h1> &cap; &ne;</h1>
    <i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
    第五代三番四复<br />adsd
    <p>段落</p>
    ------------<br>
    <b>可以</b> <em>可以</em> <i>可以</i> <del>可以</del>
    <b>加粗文本</b><br><br>
    <i>斜体文本</i><br><br>
    <code>电脑自动输出</code><br><br>
    这是 <sub> 下标</sub> 和 <sup> 上标</sup> 

    <a href="http://www.baidu.com">baidu</a>
    <a href="#">23333<br></a>
    <a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
    <a id="tips">有用的提示</a>
    <a href="#tips">访问有用的提示部分</a>
    <a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>
    <br>
    <img src="chino1.gif" alt = "kwfwi", height="100", width="200">
    <br>
    <img src="chino2.jpg", alt="chino", width="130", height="200">
    <br>
    <img src="https://www.runoob.com/try/demo_source/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
    <map name="planetmap">
       <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://www.runoob.com/try/demo_source/sun.htm">
       <area shape="circle" coords="90,58,3" alt="Mercury" href="https://www.runoob.com/try/demo_source/mercur.htm">
       <area shape="circle" coords="124,58,8" alt="Venus" href="https://www.runoob.com/try/demo_source/venus.htm">
   </map>
   <ul>
       <li>Coffee</li>
       <li>Milk</li>
   </ul>
   <br>
   <ol>
       <li>Coffee</li>
       <li>Mike</li>
   </ol>
   <br>
   <dl>
       <dt>Coffee</dt>
       <dd>- black hot drink </dd>
       <dt>Milk</dt>
       <dd>- while cold drink</dd>
   </dl>

   <img src="t1.jpg" class="rounded-circle float-right" alt="Cinque Terre">
   <img src="t1.jpg" class="img-thumbnail float-left", alt="t1.jpg">
   <br>
   <img src="chino2.jpg" class="img-fluid", alt="tmp.jpeg">
   <div class="container">
       <h1> Bootstrap 标题 (2.5rem = 40px) </h1>
       <h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
       <h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
       <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
       <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
       <h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
       
       <h1>Display 标题</h1>
       <p>Display 标题可以输出更大更粗的字体样式</p>
       <h1 class="display-1">Display 1</h1>
       <h1 class="display-2">Display 2</h1>
       <h1 class="display-4">Display 4 end</h1>
       
       <h1>更小文本标题</h1>
       <p>small 元素用于字号更小的颜色更浅的文本:</p>       
       <h1>h1 标题 <small>副标题</small></h1>
       <h2>h2 标题 <small>副标题</small></h2>
       <h3>h3 标题 <small>副标题</small></h3>
       <h4>h4 标题 <small>副标题</small></h4>
       <h5>h5 标题 <small>副标题</small></h5>
       <h6>h6标题</h6>
       <h6>small 标题 <small>副标题</small></h6>

       <h>高亮文本</h>
       <p>用mark<mark>呵呵哈哈哈</mark>噢</p>

       <h1>Abbreviations</h1>
       <p>The abbr element is used to mark up an abbreviation or acronym:</p>
       <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
       
       <h1>Blockquotes</h1>
       <p>The blockquote element is used to present content from another source:</p>
       <blockquote class="blockquote">
          <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
          <footer class="blockquote-footer">From WWF's website</footer>
       </blockquote>

       <h1>Description Lists</h1>    
       <p>The dl element indicates a description list:</p>
       <dl>
         <dt>Coffee</dt>
         <dd>- black hot drink</dd>
         <dt>Milk</dt>
         <dd>- white cold drink</dd>
       </dl>   

       <h1>代码片段</h1>
       <p>可以将一些代码元素放到 code 元素里面:</p>
       <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>

       <h1>Multiple Code Lines</h1>
       <p>For multiple lines of code, use the pre element:</p>
       <pre>
       Text in a pre element
       is displayed in a fixed-width
       font, and it preserves
       both      spaces and
       line breaks.
       </pre>
       
       <h1>徽章</h1>
       <h1>测试标题 <span class="badge badge-secondary">omG</span></h1>
       <h2>测试标题 <span class="badge badge-secondary">New</span></h2>
       <h3>测试标题 <span class="badge badge-secondary">New</span></h3>
       <h4>测试标题 <span class="badge badge-secondary">New</span></h4>
       <h5>测试标题 <span class="badge badge-secondary">New</span></h5>
       <h6>测试标题 <span class="badge badge-secondary">New</span></h6>

        <span class="badge badge-primary">主要</span>
        <span class="badge badge-secondary">次要</span>
        <span class="badge badge-success">成功</span>
        <span class="badge badge-danger">危险</span>
        <span class="badge badge-warning">警告</span>
        <span class="badge badge-info">信息</span>
        <span class="badge badge-light">浅色</span>
        <span class="badge badge-dark">深色</span>
        
        <BR>
        <span class="badge badge-pill badge-default">默认</span>
        <span class="badge badge-pill badge-primary">主要</span>
        <span class="badge badge-pill badge-success">成功</span>
        <span class="badge badge-pill badge-info">信息</span>
        <span class="badge badge-pill badge-warning">警告</span>
        <span class="badge badge-pill badge-danger">危险</span>
        
        <h2>代表指定意义的文本颜色</h2>
        <p class="text-muted">柔和的文本。</p>
        <p class="text-primary">重要的文本。</p>
        <p class="text-success">执行成功的文本。</p>
        <p class="text-info">代表一些提示信息的文本。</p>
        <p class="text-warning">警告文本。</p>
        <p class="text-danger">危险操作文本。</p>
        <p class="text-secondary">副标题。</p>
        <p class="text-dark">深灰色文字。</p>
        <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
        <p class="text-white">白色文本（白色背景上看不清楚）。</p>
        <h2>文本颜色</h2>
        <p>鼠标移动到链接。</p>
        <a href="#" class="text-muted">柔和的链接。</a>
        <a href="#" class="text-primary">主要链接。</a>
        <a href="#" class="text-success">成功链接。</a>
        <a href="#" class="text-info">信息文本链接。</a>
        <a href="#" class="text-warning">警告链接。</a>
        <a href="#" class="text-danger">危险链接。</a>
        <a href="#" class="text-secondary">副标题链接。</a>
        <a href="#" class="text-dark">深灰色链接。</a>
        <a href="#" class="text-light">浅灰色链接。</a> 
        
        <h2>背景颜色</h2>
        <p class="bg-primary text-white">重要的背景颜色。</p>
        <p class="bg-success text-white">执行成功背景颜色。</p>
        <p class="bg-info text-white">信息提示背景颜色。</p>
        <p class="bg-warning text-white">警告背景颜色</p>
        <p class="bg-danger text-white">危险背景颜色。</p>
        <p class="bg-secondary text-white">副标题背景颜色。</p>
        <p class="bg-dark text-white">深灰背景颜色。</p>
        <p class="bg-light text-dark">浅灰背景颜色。</p>

    </div>
    <div> 
        <a href="#" data-toggle="tooltip" data-placement="top" title="我是提示内容!">鼠标移动到我这</a>
        <a href="#" data-toggle="tooltip" data-placement="bottom" title="我是提示内容!">鼠标移动到我这</a>
        <a href="#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">鼠标移动到我这</a>
        <a href="#" data-toggle="tooltip" data-placement="right" title="我是提示内容!">鼠标移动到我这</a>
        <br>

        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
        </button>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
        </button>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
        </button>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
        </button>
        <br>

        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
        </button>
        <br>

        <span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="2333Disabled tooltip">
            <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
        </span>
    </div>

    <script>
        $(document).ready(function(){
           $('[data-toggle="tooltip"]').tooltip();   
        });
    </script>

</body>
</html>